<template>
  <div>
    <!-- 头部 -->
    <HeaderWhite v-if="show === 'white'" />
    <HeaderBlack v-if="show === 'black'" />

    <!-- 路由组件出口 -->
    <router-view></router-view>

    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
//一般组件
import HeaderWhite from "./components/Header_white";
import HeaderBlack from "./components/Header_black";
import Footer from "./components/Footer";

export default {
  name: "App",
  data() {
    return {};
  },
  mounted() {},
  computed: {
    //路由元信息(判断 header 是显示黑色还是白色)
    show: {
      get() {
        return this.$route.meta.bgColor;
      },
      set(val) {
        this.$route.meta.bgColor = val;
      },
    },
  },
  //注册组件
  components: {
    HeaderWhite,
    HeaderBlack,
    Footer,
  },
};
</script>

<style>
.loginOverall {
  overflow: hidden;
}

.messageOverall {
  overflow: hidden;
  background-color: #f2f2f2;
}

.personalOverall {
  overflow: hidden;
  background: url(~@/assets/images/personalBG.jpg) 610px -280px;
}

.registerOverall {
  overflow: hidden;
}

.subscribeOverall {
  overflow: hidden;
  background-color: #f6f6f6;
}
</style>
